<template>
  <custom-modal
    width="1000px"
    :destroyOnClose="true"
    :maskClosable="false"
    :title="'问题详情'"
    :visible="visible"
    @cancel="$emit('close')"
  >
    <template #footer>
      <a-button @click="$emit('close')">{{ $t('close') }}</a-button>
    </template>
    <a-form-model v-if="formData"
      :model="formData"
      :colon="false" style="padding:5px 10%"
      ref="validateForm">
      <a-row :gutter="20">
        <a-col :md="12" :sm="24">
          <a-form-model-item prop="name">
            <template #label>
              <span style="margin-right:2px;">{{ $t('姓名') }}</span>
            </template>
            <a-input v-model="formData.name" readOnly/>
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-model-item prop="account">
            <template #label>
              <span style="margin-right:2px;">{{ $t('工号') }}</span>
            </template>
            <a-input v-model="formData.account" readOnly/>
          </a-form-model-item>
        </a-col>

<!--      </a-row>-->
<!--      <a-row>-->
        <a-col :md="12" :sm="24">
          <a-form-model-item :label="$t('联系电话')" prop="phone">
            <a-input v-model="formData.phone" readOnly/>
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-model-item :label="$t('比亚迪企业邮箱')" prop="email">
            <a-input v-model="formData.email" readOnly/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="16" :sm="24">
          <a-form-model-item :label="'问题类型:'" prop="questionTypes">
            <a-select
              v-model="formData.questionTypes"
              mode="multiple"
              :allowClear="true"
              :filterOption="$commonFun.filterOption"
              :placeholder="$t('pleaseSelect') + $t('businessType')"
              disabled=""
            >
              <!-- <a-select-option v-for="item in businessSlectOptions" :key="item.value" >{{ item.name }}</a-select-option> -->
              <a-select-option key="1" :value="1" title="1">
                平台功能使用疑问
              </a-select-option>
              <a-select-option key="2" :value="2" title="2">
                平台功能优化建议
              </a-select-option>
              <a-select-option key="3" :value="3" title="3"> 功能缺陷反馈</a-select-option>
              <a-select-option key="4" :value="4" title="4"> 其他</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('remark')" prop="remark">
            <div class="helpContent" v-html="formData.feedbackContent"></div>
<!--            <custom-text-area-->
<!--              :val="formData.feedbackContent"-->
<!--              :rows="5"-->
<!--              :max-len="200"-->
<!--            ></custom-text-area>-->
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </custom-modal>
</template>
<script>
  import CustomModal from '@/components/CustomModal/index.vue'
  import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
  import CustomTextArea from '@/components/CustomTextArea/index.vue'

  export default {
    name: 'AddConfigModal',
    components: {
      CustomModal,
      CommonSelect,
      CustomTextArea
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: () => {
          return null
        }
      }
    },
    data() {
      return {
      }
    },
    watch: {},
    methods: {}
  }
</script>
<style lang="less" scoped>
/deep/ .ant-select-disabled .ant-select-selection{
  background-color: white;
  cursor: auto;
}
/deep/ .ant-form-item {
  margin-bottom: 10px;
}
</style>
